<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>首页 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="./static/css/bootstrap.min.css" rel="stylesheet">
<link href="./static/css/materialdesignicons.min.css" rel="stylesheet">
<link href="./static/css/style.min.css" rel="stylesheet">
<link rel="stylesheet" href="./static/layui/css/layui.css">
</head>
  
<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar">
      
      <!-- logo -->
      <div id="logo" class="sidebar-header">
        <a href="index.html"><img src="./static/images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
      </div>
      <div class="lyear-layout-sidebar-scroll"> 
        
        <nav class="sidebar-main">
          <ul class="nav nav-drawer">
            <li class="nav-item active"> <a href="index.html"><i class="mdi mdi-home"></i> 后台首页</a> </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)">
                <i class="mdi mdi-palette"></i> 权限管理</a>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="./customer_table.html"><i class="mdi mdi-format-align-justify"></i> 顾客管理</a>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="./study_room.html"><i class="mdi mdi-file-outline"></i> 自习室管理</a>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-language-javascript"></i> JS 插件</a>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-menu"></i> 多级菜单</a>
                </li>
                <li> <a href="#!">一级菜单</a> </li>
              </ul>
            </li>
          </ul>
        </nav>
        
        <div class="sidebar-footer">
          <p class="copyright">Copyright &copy; 2019. <a target="_blank" href="http://lyear.itshubao.com">IT书包</a> All rights reserved.</p>
        </div>
      </div>
      
    </aside>
    <!--End 左侧导航-->
    
    <!--头部信息-->
    <header class="lyear-layout-header">
      
      <nav class="navbar navbar-default">
        <div class="topbar">
          
          <div class="topbar-left">
            <div class="lyear-aside-toggler">
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
            </div>
            <span class="navbar-page-title"> 后台首页 </span>
          </div>
          
          <ul class="topbar-right">
            <li class="dropdown dropdown-profile">
              <a href="javascript:void(0)" data-toggle="dropdown">
                <img class="img-avatar img-avatar-48 m-r-10" src="./static/images/users/avatar.jpg" alt="笔下光年" />
                <span>笔下光年 <span class="caret"></span></span>
              </a>
              <ul class="dropdown-menu dropdown-menu-right">
                <li> <a href="lyear_pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                <li> <a href="lyear_pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                <li class="divider"></li>
                <li> <a href="lyear_pages_login.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
              </ul>
            </li>
          </ul>
          
        </div>
      </nav>
      
    </header>
    <!--End 头部信息-->
    
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      <!-- <link rel="stylesheet" href="../customer.json"> -->
      <table class="layui-table" lay-data="{url:'../customer.json',page:false,id:'test3', escape: true}" lay-filter="test3">
        <thead>
          <tr>
            <!-- <th lay-data="{type:'checkbox'}">ID</th> -->
            <th lay-data="{field:'ssRoomID', width:80,edit: 'text'}">自习室编号</th>
            <th lay-data="{field:'ssRoomType', width:80,edit: 'text'}">自习室类型</th>
            <th lay-data="{field:'ssRoomName', width:80,edit: 'text'}">自习室封面图</th>
            <th lay-data="{field:'coverMap', width:80,edit: 'text'}">自习室编号</th>
            <th lay-data="{field:'introduce', width:120, edit: 'text'}">自习室介绍</th>
            <th lay-data="{field:'address', edit: 'text', minWidth: 150}">自习室地址</th>
            <th lay-data="{field:'locNum', width:80, edit: 'text'}">自习室座位总数</th>
            <th lay-data="{field:'useNum', edit: 'text', minWidth: 100}">自习室座位使用数量</th>
            <!-- <th lay-data="{field:'experience', edit: 'text'}">积分</th> -->
          </tr>
        </thead>
      </table>
      
    </main>
    <!--End 页面主要内容-->
  </div>
</div>

<script type="text/javascript" src="./static/js/jquery.min.js"></script>
<script type="text/javascript" src="./static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="./static/js/main.min.js"></script>
<script src="./static/layui/layui.js"></script>


<!-- layui -->
<script>
layui.use(['table', 'util'], function(){
  var table = layui.table
  ,util = layui.util;
  
  //监听单元格编辑
  table.on('edit(test3)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
    layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ util.escape(value));
  });
});
</script>
</body>
</html>